<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>魔兽世界</title>
    </head>
    <body>
        <div id="app">
            <a href="https://wwww.baidu.com" @click.prevent="onLinkClick">百度首页</a>
            <input @keyup.enter="submit">
            <input @keyup.esc="clearInput">
            <p>用户名：{{userName}}</p>
            <input type="text" v-model="userName">
            <p>选中的省份是：{{province}}</p>
            <select v-model="province">
                <option value="">请选择</option>
                <option value="1">北京</option>
                <option value="2">上海</option>
                <option value="3">广东</option>
            </select>
            <input type="text" v-model.number="n1">
            <input type="text" v-model.number="n2">
            <span>{{n1+n2}}</span>
            <br>
            <p v-if="networkState===200">请求成功，被v-if控制</p>
            <p v-show="networkState===200">请求成功，被v-show控制</p>
            <br>
           网络状态 <input type="text" v-model.number="networkState">
           <div v-if="Math.random()>0.5">随机数大于0.5</div>

           <div v-else>随机数小于等于0.5</div>
           输入成绩：<input type="text" v-model="type">
           <div v-if="type==='A'">优秀</div>
           <div v-else-if="type==='B'">良好</div>
           <div v-else-if="type==='C'">一般</div>
           <div v-else>差</div>


        </div>
        <script src="/lib/vue.js"></script>
        <script>
            const vm = new Vue({
                el:"#app",
                data:{
                    userName:'张三',
                    province:'安徽',
                    n1:'',
                    n2:'',
                    networkState:200,
                    type:''
                },
                methods:{
                    onLinkClick(){

                    },
                    submit(){

                    },
                    clearInput(){

                    }
                }
            });
        </script>
    </body>
</html>